<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<div class="box">box 1</div>
<div class="box">box 2</div>
<div class="box">box 3</div>

<ul class="list">
    <li>li 1</li>
    <li>li 2</li>
    <li>li 3</li>
</ul>

<script>
// var box1 = document.querySelector('.box');
// var boxs = document.querySelectorAll('.box');
// var li1 = document.querySelector('.list li');
// var lis = document.querySelectorAll('.list li');

// // 获取页面中不存在的元素
// var hehe = document.querySelector('.hehe');
// var spans = document.querySelectorAll('span');
// console.log( hehe );// null
// console.log( spans );// NodeList [] 

// 获取单个元素的函数
function $1(selector){
    return document.querySelector(selector);
}
// var box1 = $1('.box');
// var li1 = $1('.list li');
// var hehe = $1('.hehe');
// console.log( box1 );// <div class="box">box 1</div>
// console.log( li1 );// <li>li 1</li>
// console.log( hehe );// null


// 获取元素集合的函数
function $2(selector){
    return document.querySelectorAll(selector);
}
// var boxs = $2('.box');
// var lis = $2('.list li');
// var spans = $2('span');
// console.log( boxs );// NodeList(3) [div.box, div.box, div.box]
// console.log( lis );// NodeList(3) [li, li, li]
// console.log( spans );// NodeList() []


// 获取元素的函数
function $(selector){
    var dom = document.querySelectorAll(selector);
    if (dom.length === 1) {
        // 返回单个元素
        return dom[0];
    } else {
        // 返回元素集合
        return dom;
    }
}
var boxs = $('.box');
var list = $('.list');
var spans = $('span');

console.log( boxs );// NodeList(3) [div.box, div.box, div.box]
console.log( list );// <ul class="list"></ul>
console.log( spans );//[]



// 获取到单个元素可以直接操作
// list.style.border = '1px solid green';

// JS不能直接操作元素集合（不支持批量操作）
// boxs.style.color = 'red';

// 只能一个一个元素操作
// boxs[0].style.color = 'red';
// boxs[1].style.color = 'red';
// boxs[2].style.color = 'red';

for (var i = 0; i < boxs.length; i++){
    boxs[i].style.color = 'blue';
}

</script>
</body>
</html>